
import Api from '@/api/index';
import '@/assets/css/index.less';
import Footer from '@/components/common/footer';
import { Card, CartCircle } from '@react-vant/icons';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Dialog, Empty, Notify, Search, Space, Tabs } from 'react-vant';
const Home = () => {

    const [search, changeSearch] = useState()
    const [keyword, setKeyword] = useState()
    const [TypeList, setTypeList] = useState([])
    const [typeid, setTypeid] = useState()
    const [CardData, setCardData] = useState([])
    // const [sueStatus, setSueStatus] = useState(false)
    let navigate = useNavigate()
    useEffect(() => {
        let sueStatus = false
        // 请求分类的数据
        async function TypeList() {
            let result = await Api.ApiCardType()

            if (result.code === 1 && !sueStatus) {
                // unshift => 给数组前面追加内容
                result.data.unshift({
                    id: 0,
                    name: '全部'
                })
                // console.log(result.data)
                setTypeList(result.data)
            }
        }
        async function CardList() {
            let data = {
                userid: React.$LoginUser.id,
                keyword: keyword
            }
            if (typeid > 0) {
                data.typeid = typeid
            }
            // console.log(data);
            let result = await Api.ApiCardList(data)
            // console.log(result);
            if (result.code === 1) {
                setCardData(result.data)
            }
        }

        TypeList()
        CardList()
        return () => sueStatus = true
    }, [typeid, keyword])

    // 处理CardList警告之前的代码案例
    // const CardList = async () => {
    //     let data = {
    //         userid: React.$LoginUser.id,
    //         keyword: keyword
    //     }
    //     if (typeid > 0) {
    //         data.typeid = typeid
    //     }
    //     let result = await Api.ApiCardList(data)
    //     if (result.code === 1) {
    //         setCardData(result.data)
    //     }
    // }

    const SearchKey = () => { setKeyword(search) }

    const ChangeType = (val) => {
        // console.log(val)
        setTypeid(val.name)
    }

    //购买事件
    const onPay = (val) => {
        Dialog.confirm({
            message: "是否确购买该名片？价格：" + val.price + "积分",
        }).then(async () => {
            let data = {
                userid: React.$LoginUser.id,
                cardid: val.id,
                price: val.price
            }

            let result = await Api.ApiCardPay(data)
            if (result.code === 0) {
                Notify.show({
                    type: 'danger',
                    message: result.msg
                })

                return false
            } else {
                Notify.show({
                    type: 'success',
                    message: result.msg,
                    onClose: () => {
                        navigate('/card/card/index')
                    }
                })
            }
        }).catch(() => {
            console.log('catch');
        })
    }

    const List = () => {
        if (CardData.length > 0) {
            return (
                <div className="list">
                    {CardData.map((item, index) => {
                        return (
                            <div className="item" key={item.id}>
                                <div className="content">
                                    <h3 className="title">
                                        {item.nickname}

                                    </h3>
                                    <div className="info">
                                        <Card spin color="#87CEEB" style={{
                                            fontSize: "20"
                                        }} />
                                        {/* 不使用图标代码图标 */}
                                        {/* <div className="icon">
                                            <Image src="./assets/images/info.png"></Image>
                                        </div> */}
                                        <div className="desc">
                                            {item.content}
                                        </div>
                                    </div>
                                </div>
                                <div className="call icon">
                                    <Space>
                                        <CartCircle color="#f44336" fontSize={30} onClick={(e) => onPay(item, e)} />
                                    </Space>
                                </div>
                            </div>
                        )
                    })}
                </div>
            )
        } else {
            return (
                <>
                    <Empty description="暂无数据" />;
                </>
            )
        }
    }

    return (
        <>
            {/* <!-- 不使用UI组件的搜索代码 --> */}
            {/* <div className="search">
                <div className="box">
                    <div className="icon">
                        <span className="glyphicon glyphicon-search"></span>
                    </div>
                    <Field
                        className="input"
                        placeholder="请输入名字"
                        value={search}
                        onChange={changeSearch}
                    >
                    </Field>
                    <button className="btn" size="mini" type="default" onClick={() => SearchKey()} >搜索</button>
                </div>
            </div> */}
            <Search
                shape="round"
                showAction
                background="#4fc08d"
                value={search}
                onChange={changeSearch}
                placeholder="请输入名字"
                actionText={<div onClick={() => SearchKey()} >搜索</div>}
            >
            </Search>
            {/* <!-- 分类 --> */}
            <div className="type wow fadeInUp">
                <Tabs active={typeid} onClickTab={ChangeType}>
                    {TypeList.map((item, index) => (
                        <Tabs.TabPane key={item.id} title={item.name}>
                        </Tabs.TabPane>
                    ))}
                </Tabs>
            </div>

            {/* <!-- 列表 --> */}
            <div className="contact wow fadeInUp" data-wow-delay="100ms">
                {/* 没有抽离出来的代码案例 */}
                {/* { 
                    CardData.length ?
                        <>
                            <div className="list">
                                {CardData.map((item, index) => {
                                    return (
                                        <div className="item" key={item.id}>
                                            <div className="content">
                                                <h3 className="title">
                                                    <a href="ContactAdd.html">{item.nickname}</a>
                                                </h3>
                                                <div className="info">
                                                    <div className="icon">
                                                        <Image src="./assets/images/info.png"></Image>
                                                    </div>
                                                    <div className="desc">
                                                        {item.content}
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="call icon">
                                                <Space>
                                                    <ShoppingCartO fontSize={30} />
                                                </Space>
                                            </div>
                                        </div>
                                    )
                                })}
                            </div>
                        </> : <Empty description="暂无数据" />
                } */}
                <List />
            </div>
            <Footer />
        </>
    )
}


export default Home